<template>
  <div class="wrap">
    <div class="sqlEdit-Header">
      <div class="sqlEdit-Header-left">
        <p @click="executeSql(CodeMirrorEditor.getValue())">
          <img src="../../assets/img/zhixing.png" /> <span>执行</span>
        </p>
        <p @click="clearSql"><img src="../../assets/img/clear.png" /> <span>清空</span></p>
        <p @click="saveSql">
          <img src="../../assets/img/save.png" /> <span>保存</span>
        </p>
        <p @click="format">
          <img src="../../assets/img/fomdata.png" />
          <span>格式化</span>
        </p>
      </div>
      <div>
        <span>主题：</span>
        <el-select
          v-model="SelectValue"
          @change="selectChange"
          placeholder="请选择"
          size="mini"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <textarea class="form-control" id="editor" name="code"></textarea>
  </div>
</template>

<script>
// 核心包
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint.css'
// 主题
import 'codemirror/theme/mbo.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/theme/3024-night.css'
import 'codemirror/theme/cobalt.css'
import 'codemirror/theme/erlang-dark.css'
import 'codemirror/theme/ambiance-mobile.css'
import 'codemirror/theme/liquibyte.css'
import 'codemirror/theme/idea.css'
// 滚动条样式
import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/scroll/simplescrollbars'
// 提示+自动补全
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/lint/lint'
// import 'codemirror/addon/lint/sql-lint'
// import 'codemirror/addon/hint/sql-hint'

// sql 格式化
let sqlFormatter = require('sql-formatter')
var FileSaver = require('file-saver')
require('codemirror/addon/edit/matchbrackets') // 匹配结束符号，比如"]、}"
// require('codemirror/addon/selection/active-line')
// 支持语言
require('codemirror/mode/sql/sql')
// 提示
require('codemirror/addon/hint/show-hint')
require('codemirror/addon/hint/sql-hint')
export default {
  data () {
    return {
      CodeMirrorEditor: '', // sql编辑器配置项
      SelectValue: 'mbo',
      options: [
        {
          value: 'mbo',
          label: '浅黑'
        },
        {
          value: '3024-day',
          label: '灰白'
        },
        {
          value: 'idea',
          label: '浅白'
        },
        {
          value: 'cobalt',
          label: '深蓝'
        },
        {
          value: 'liquibyte',
          label: '紫色'
        },
        {
          value: 'erlang-dark',
          label: '浅蓝'
        },
        {
          value: '3024-night',
          label: '暗黑'
        }
      ]
    }
  },
  watch: {
    SelectValue (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.sqlEdit()
      }
    }
  },
  mounted () {
    this.sqlEdit()
  },
  methods: {
    // 配置项
    sqlEdit () {
      let theme = localStorage.getItem('theme') || this.SelectValue
      this.SelectValue = theme
      const mime = { name: 'text/x-mysql' }
      let myTextarea = document.getElementById('editor')
      this.CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
        mode: mime, // 编辑器语言
        indentWithTabs: true,
        smartIndent: true, // 自动缩进是否开启
        lineNumbers: true, // 是否使用行号
        matchBrackets: true, // 括号匹配
        theme: theme, // 主题
        lineWrapping: 'wrap', // 在长行时文字是换行(wrap)还是滚动(scroll)
        scrollbarStyle: 'simple', // null 隐藏滚动条 "simple","overlay"选择内侧与外侧的滚动条
        // readOnly: true, 是否只读
        extraKeys: { Ctrl: 'autocomplete' } // ctrl可以弹出选择项
      })
      this.CodeMirrorEditor.setValue('select * from table where id = 3')
      // inputRead 当用户输入或粘贴时编辑器时触发
      this.CodeMirrorEditor.on('inputRead', () => {
        this.CodeMirrorEditor.showHint()
      })
    },
    /* 代码格式化 */
    format () {
      let sqlContent = this.CodeMirrorEditor.getValue()
      if (sqlContent) {
        this.CodeMirrorEditor.setValue(sqlFormatter.format(sqlContent))
      } else {
        this.$message.error('请填写sql语句')
      }
    },
    // 执行sql
    executeSql (data) {
      this.$emit('executeSql', data)
    },
    clearSql () {
      this.CodeMirrorEditor.setValue('')
    },
    // 保存
    saveSql () {
      // 将json转换成字符串
      let data = this.CodeMirrorEditor.getValue()
      const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
      FileSaver.saveAs(blob, 'hahaha.sql')
    },
    selectChange (val) {
      this.SelectValue = val
      localStorage.setItem('theme', val)
    }
  }
}
</script>

<style scoped lang="less">
.wrap {
  height: 100%;
  .sqlEdit-Header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    width: 99% !important;

    margin: 0 auto 0;
    .sqlEdit-Header-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      padding: 5px 10px;

      p {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 5px;
        &:hover {
          cursor: pointer;
        }
        white-space: nowrap;
      }
      img {
        width: 20px;
        margin-right: 5px;
      }
    }
    & > div:nth-child(2) {
      .el-select {
        width: 100px;
      }
    }
  }
}
</style>
